<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丽水市教育系统食堂采购溯源大数据</title>
    <link rel="stylesheet" href="./css/slick.css">
    <link href="./css/index.css" media="all" rel="stylesheet">
    <link href="./css/aqsy.css" media="all" rel="stylesheet">
    <link rel="stylesheet" href="./css/tracesource.css">
    <style>
        html {
            font-size: 62.5% !important;
            /* 10÷16=62.5% */
        }

        @media only screen and (min-width: 481px) {
            html {
                font-size: 80% !important;
                /* 15.04÷16=94% */
            }
        }

        @media only screen and (min-width: 720px) {
            html {
                font-size: 90% !important;
                /* 17.44÷16=109% */
            }
        }

        @media only screen and (min-width: 1920px) {
            html {
                font-size: 100% !important;
                /* 20÷16=125% */
            }

            w .siper-container {
                width: 900px !important;
                height: 600px !important;
            }
        }

        /* 4k分辨率下 */
        @media only screen and (min-width: 3840px) {
            html {
                font-size: 300% !important;
                /* 20÷16=125% */
            }
        }

        /* 4k分辨率下结束 */
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header" id="header">
            <img class="header-bg" src="./images/header-bg.png" />
            <div class="header-content">
                <div class="left-content header-left">
                    <div class="time-container">
                        <img src="./images/header-time.png" />
                        <div class="time-content">
                            <p id="time"></p>
                            <span id="date"></span>
                        </div>
                    </div>
                    <div class="time-btn time-btn-left">
                        <img src="./images/icon/jiben.png" />基本情况
                    </div>
                </div>
                <div class="center-content">
                    <div class="title">
                        <span>丽水市教育系统食堂采购溯源大数据</span>
                    </div>
                </div>
                <div class="right-content header-right">
                    <div class="time-btn time-btn-right">
                        <img src="./images/icon/suyuan.png" />采购溯源
                    </div>
                    <div class="user-container">
                        <img src="./images/header-user.png" class="logo" />
                        <span class="username">ching126</span>
                        <div class="exit">
                            <img src="./images//header-exit.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" id="container">
            <div class="container-mid">
                <div class="left-content">
                    <div id="purchase-summary" class="info" style=' height: calc(calc(calc(100% - 0.6rem) / 2) * 1);'>
                        <div class="up" style="height: 10%;padding-bottom: 15px;">
                            <img src="./images/icon/left1.png" alt="">
                            <p class="title">分区采购汇总</p>
                        </div>
                        <div class="down" style="height: 90%;">
                            <div class="left">
                                <ul>
                                    <li class="day">
                                        <span class="text">今日</span>
                                        <span class="totalnum">1888</span>
                                        <span>元</span>
                                        <img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                    <li class="month">
                                        <span class="text">本月</span>
                                        <span class="totalnum">9888</span>
                                        <span>元</span>
                                        <img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                    <li class="year">
                                        <span class="text">本年</span>
                                        <span class="totalnum">109888</span>
                                        <span>元</span>
                                        <img src="images/arrow-red.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                </ul>
                                <div class="school">
                                    <img src="./images/kindergarten.png" alt="">
                                    <span class="text">幼儿园：1000所</span>
                                </div>
                            </div>
                            <div class="center">
                                <ul>
                                    <li class="day">
                                        <span class="text">今日</span>
                                        <span class="totalnum">2888</span>
                                        <span>元</span>
                                        <img src="images/arrow-red.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                    <li class="month">
                                        <span class="text">本月</span>
                                        <span class="totalnum">9888</span>
                                        <span>元</span>
                                        <img src="images/arrow-red.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                    <li class="year">
                                        <span class="text">本年</span>
                                        <span class="totalnum">209888</span>
                                        <span>元</span>
                                        <span></span>
                                    </li>
                                </ul>
                                <div class="school">
                                    <img src="./images/school.png" alt="">
                                    <span class="text">小学：1200所</span>
                                </div>
                            </div>
                            <div class="right ">
                                <ul>
                                    <li class="day">
                                        <span class="text">今日</span>
                                        <span class="totalnum">1888</span>
                                        <span>元</span>
                                        <img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                    <li class="month">
                                        <span class="text">本月</span>
                                        <span class="totalnum">6888</span>
                                        <span>元</span>
                                        <img src="images/arrow-green.png" style="height: 15px;width: 10px;" alt="">
                                    </li>
                                    <li class="year">
                                        <span class="text">本年</span>
                                        <span class="totalnum">36888</span>
                                        <span>元</span>
                                        <span></span>
                                    </li>
                                </ul>
                                <div class="school">
                                    <img src="./images/highschool.png" alt="">
                                    <span class="text">初中：1600所</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="purchase-category" class="info"
                        style=' height: calc(calc(calc(100% - 0.6rem) / 2) * 1);margin-bottom: 0;'>
                        <div class="up">
                            <img src="./images/icon/left2.png" alt="">
                            <p class="title">采购分类占比</p>
                        </div>
                        <div class="down"
                            style="height: 90%;display: flex;justify-content: space-evenly;align-items: center;">
                            <div id="month-static"></div>
                            <div id="year-static"></div>
                        </div>
                    </div>
                </div>

                <div class="center-content" style="margin-bottom: 0">
                    <div class="info-big" style="margin-bottom: 0">
                        <div class="up" style="height: 10%;margin-left:20px;">
                            <img src="./images/icon/center.png" alt="">
                            <p class="title">区域采购数据</p>
                        </div>
                        <div class="down" style="height: 90%;">
                            <div id="map"></div>
                        </div>

                        <div class="map-info">
                            <div class="minfo">
                                <h3 class="count">123<span class="unit">元</span></h3>
                                <p class="type">幼儿园</p>
                                <p class="unit">58所</p>
                            </div>
                            <div class="minfo">
                                <h3 class="count">123<span class="unit">元</span></h3>
                                <p class="type">小学</p>
                                <p class="unit">102所</p>
                            </div>
                            <div class="minfo">
                                <h3 class="count">123<span class="unit">元</span></h3>
                                <p class="type">初中</p>
                                <p class="unit">15所</p>
                            </div>
                        </div>

                        <div id='backBtn' class="backbtn">返回</div>
                    </div>
                </div>
                <div class="right-content">
                    <div id='pic' class="info" style="margin-bottom: 0.2rem;">
                        <div class="up">
                            <img src="./images/icon/right1.png" alt="">
                            <p class="title">违规照片</p>
                        </div>
                        <div class="down">
                            <div class="left">
                                <img src="./images/right/weiguipic.png" alt="">
                                <span>2021.06.28 12:56</span>
                            </div>
                            <div class="right">
                                <ul>
                                    <li>
                                        <span class="fieldngit ame">学校名称</span><br>
                                        <span class="fieldvalue">丽水市职业高级中学</span>
                                    </li>
                                    <li>
                                        <span class="fieldname">学校名称</span><br>
                                        <span class="fieldvalue">丽水市职业高级中学</span>
                                    </li>
                                    <li>
                                        <span class="fieldname">学校名称</span><br>
                                        <span class="fieldvalue">丽水市职业高级中学</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="info" style="margin-bottom: 0.2rem;">
                        <div class="up">
                            <img src="./images/icon/right2.png" alt="">
                            <p class="title">消毒台账统计</p>
                        </div>
                        <div class="down">
                            <div id="xiaodu-pie" class="left"></div>
                            <div id='xiaodu-bar' class="right"></div>
                        </div>
                    </div>
                    <div class="info" style="margin-bottom: 0;">
                        <div class="up">
                            <img src="./images/icon/liuyang-icon.png" alt="">
                            <p class="title">留样台账</p>
                        </div>
                        <div class="down">
                            <div id="liuyang-pie" class="left"></div>
                            <div id='liuyang-bar' class="right"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-bottom">
                <div class="info bottom-mid" style="height: 78%;">
                    <div class="jiance" style="display: flex;height: 20%;">
                        <div class="up" style="width: 60%;">
                            <img src="./images/icon/bottom1.png" alt="">
                            <p class="title">检测汇总（<span class='text-style-1'>103</span><span
                                    style="color: red;">/3</span>）
                            </p>
                        </div>
                        <!-- <ul class="ul-txt1 jiance" style="flex:1;display: flex;justify-content: flex-end;">
                            <li id="jianceBtn1" class="mli0">价格预警</li>
                            <li id="jianceBtn2" class="mli1">过期预警</li>
                        </ul> -->
                    </div>
                    <div class="warn-table">
                        <div class="m-tablel2">
                            <div class="top">
                                <!-- <span class="s1"></span>
                                <span class="s2"></span>
                                <span class="s3"></span>
                                <span class="s4"></span> -->
                                <!-- <span class="s5">过期天数</span> -->
                                <table>
                                    <tr>
                                        <th>配送公司</th>
                                        <th>检测总批次</th>
                                        <th>不合格批次</th>

                                    </tr>
                                </table>
                            </div>
                            <div class="m-slick2">
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市配送公司1</td>
                                                <td>10次</td>
                                                <td>10次</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>



                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="height: 78%;">
                    <div class="up" style="height: 10%;">
                        <img src="./images/icon/bottom2.png" alt="">
                        <p class="title">分类食材采购量top5</p>
                    </div>
                    <ul id='selectFood' class="ul-txt1">
                        <li class="li0">蔬菜类</li>
                        <li class="li1">肉蛋类</li>
                        <li class="li2">冻品类</li>
                        <li class="li3">水产类</li>
                    </ul>
                    <div id="caigouliang-bar" style="height: 60%;"></div>
                </div>
                <div class="info bottom-big guoqi" style="height: 78%;">
                    <div class="up" style="display:flex;flex-direction:row;justify-content:space-between;">
                        <div class="" style="display: flex;align-items: center;flex: 1;">
                            <img src="./images/icon/bottom3.png" alt="">
                            <p class="title">过期预警</p>
                        </div>

                        <ul id="test1" class="ul-txt1" style="flex: 2;display: flex;justify-content: flex-end;">
                            <li class="gli0">价格预警</li>
                            <li class="gli1">过期预警</li>
                            <!-- <li class="gli2">冻品类</li>
                            <li class="gli3">水产类</li> -->
                        </ul>
                    </div>

                    <div class="warn-table">
                        <div class="m-tablel2">
                            <div class="top">
                                <!-- <span class="s1"></span>
                                <span class="s2"></span>
                                <span class="s3"></span>
                                <span class="s4"></span> -->
                                <!-- <span class="s5">过期天数</span> -->
                                <table>
                                    <tr>
                                        <th>学校名称</th>
                                        <th>商品名称</th>
                                        <th>预警内容</th>
                                        <th>过期日期</th>
                                    </tr>
                                </table>
                            </div>
                            <div class="m-slick2">
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="item">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>丽水市文元学校</td>
                                                <td>大米</td>
                                                <td>2021.07.08过期</td>
                                                <td>2021.07.02</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="height: 78%;">
                    <div class="up">
                        <img src="./images/icon/bottom4.png" alt="">
                        <p class="title">餐饮浪费</p>
                    </div>
                    <div class="down langfei-static">
                        <div class="canyin" style="background:url('./images/bg/shitang.png');background-repeat: no-repeat;
    background-size: cover;
    background-position: center;">
                            <div class="left">
                                <span class="canguan-num">1680</span>
                                <span class="canguan-field">食堂总数(家)</span>
                            </div>
                            <div class="right">
                                <span class="canguan-num">12</span>
                                <span class="canguan-field">上报数(家)</span>
                            </div>
                        </div>
                        <div class="canyin" style="background:url('./images/bg/shitang2.png');background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 1.25rem;">
                            <div class="left">
                                <span class="canguan-num">1680</span>
                                <span class="canguan-field">采购总数(斤)</span>
                            </div>
                            <div class="right">
                                <span class="canguan-num">12</span>
                                <span class="canguan-field">废弃数(斤)</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="info" style="height: 78%;">
                    <div class="up">
                        <img src="./images/icon/bottom5.png" alt="">
                        <p class="title">人均废弃量top5</p>
                    </div>
                    <div class="down">
                        <div id="feiqiliang-bar"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/echarts.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script> -->
<script src="./js/time.js"></script>
<script src="./js/tracesource.js"></script>
<!-- 地图js -->
<script src="./js/mapIcon.js"></script>
<script src="./js/map.js" type="module"></script>
<script src="./js/slick.min.js"></script>
<script>
    setTimeout(() => {
        let height = document.body.clientHeight;
        let headerH = $("#header").height();
        $("#container").height(height - headerH)
    }, 100)
    //分区采购汇总图

    //采购分类图
    //用餐情况统计
    var fenleiData1 = [{
        value: 334,
        name: '肉蛋禽'
    },
    {
        value: 300,
        name: '冻品'
    },
    {
        value: 350,
        name: '蔬菜'
    },
    {
        value: 150,
        name: '调味干货'
    },
    ]
    var fenleiColor1 = ['#2fa9ff', '#58ba27', '#fd454e', '#f0c321']
    var fenleiData2 = [{
        value: 334,
        name: '肉蛋禽'
    },
    {
        value: 300,
        name: '冻品'
    },
    {
        value: 350,
        name: '蔬菜'
    },
    {
        value: 150,
        name: '调味干货'
    },
    ]
    var fenleiColor2 = ['#2fa9ff', '#58ba27', '#fd454e', '#f0c321']

    fenleipercent(echarts, 'month-static', fenleiData1, fenleiColor1, '本月（元）');
    fenleipercent(echarts, 'year-static', fenleiData2, fenleiColor2, '本年（元）');

    // 3d地图
    // map3d(echarts, '3dmap');

    //分类食材top5，横向柱状图
    var foodCate = ['土豆（斤）', '大白菜（斤）', '鸡肉（斤）', '鸡蛋（斤）', '猪肉（斤）']
    var foodNum = [1000, 900, 800, 700, 600];
    setTimeout(() => { hengxiangbar2(echarts, 'caigouliang-bar', foodCate, foodNum); }, 100)



    /*****************监测汇总，点击切换样式******************/
    let clickIndex;
    //获取liBtn的索引号,点击切换切换样式
    $('.jiance li').click(function (e) {
        clickIndex = $('ul.jiance li').index(this);

        // if(clickIndex==tempMonitorIndex){
        //     return;
        // }
        if (clickIndex == 0) {
            $('#jianceBtn1').addClass('on');
            $('#jianceBtn2').removeClass('on');
        } else {
            $('#jianceBtn1').removeClass('on');
            $('#jianceBtn2').addClass('on');
        }
    })
    //自动切换样式，移入移出暂停切换
    let monitorIndex = 0;
    let tempMonitorIndex;
    let monitorClassName;

    function move() {
        if (monitorIndex > 1) {
            monitorIndex = 0;
        }
        if (tempMonitorIndex >= 0) {
            monitorClassName = '.mli' + tempMonitorIndex;
            $(monitorClassName).removeClass('on');
        }
        monitorClassName = '.mli' + monitorIndex;
        $(monitorClassName).addClass('on');
        tempMonitorIndex = monitorIndex;
        monitorIndex++
    }
    let monitorInteval = setInterval(move, 2000);
    $('.jiance>ul').mouseenter(function (event) {
        // event.stopPropagation();    //  阻止事件冒泡
        clearInterval(monitorInteval);

    });
    $('.jiance>ul').mouseleave(function (event) {
        // event.stopPropagation();    //  阻止事件冒泡
        clearInterval(monitorInteval);
        monitorInteval = setInterval(move, 2000);
    });

    /*****************分类食材自动切换样式*******************/
    let fenleiindexFlag = 0;
    let fenleitempIndex; //记录上一次的索引号
    let fenleiclassName;

    function fenleiMove() {
        if (fenleiindexFlag > 3) {
            fenleiindexFlag = 0; //重置索引号
        }
        // console.log(tempIndex);
        if (fenleitempIndex >= 0) {
            fenleiclassName = ".li" + fenleitempIndex;
            $(fenleiclassName).removeClass('on');
            // console.log(1);
        }
        fenleiclassName = ".li" + fenleiindexFlag;
        $(fenleiclassName).addClass('on');
        // console.log(2);
        fenleitempIndex = fenleiindexFlag;
        fenleiindexFlag++;
    }
    let fenleiIterval = setInterval(fenleiMove, 2000);
    //控制样式自动
    $('#selectFood li').mouseenter(function () {
        clearInterval(fenleiIterval);
    });
    $('#selectFood li').mouseleave(function () {
        clearInterval(fenleiIterval);
        fenleiIterval = setInterval(fenleiMove, 2000);
    });

    //分类点击切换样式
    let foodSelIndex;
    $('#selectFood li').click(function () {

        foodSelIndex = $('#selectFood li').index(this);
        $(this).addClass('on');
        // console.log(foodSelIndex);
        // console.log(fenleitempIndex);
        if (foodSelIndex != fenleitempIndex) {
            $('#selectFood li').eq(fenleitempIndex).removeClass('on');
        }
        fenleitempIndex = foodSelIndex;
    });
    //分类食材采购top5横向bar
    hengxiangbar(echarts, 'caigouliang-bar', foodCate, foodNum);

    /**************过期预警********************/
    //过期预警tab点击效果
    // var lastIndex;
    // $("#test1").click(function (e) {
    //     //获取点击元素的索引号
    //     var index = $("#test1 li").index(this);
    //     if (lastIndex) {//不是第一个
    //         $("ul#test1").children(lastIndex).removeClass("on");
    //     }
    //     lastIndex = index;
    //     $(e.target).addClass('on');

    // });

    let guoqiindexFlag = 0;
    let guoqitempIndex; //记录上一次的索引号
    let guoqiclassName;

    function guoqiMove() {
        // console.log(333);
        if (guoqiindexFlag > 3) {
            guoqiindexFlag = 0; //重置索引号
        }
        // console.log(tempIndex);
        if (guoqitempIndex >= 0) {
            guoqiclassName = ".gli" + guoqitempIndex;
            $(guoqiclassName).removeClass('on');
            // console.log(1);
        }
        guoqiclassName = ".gli" + guoqiindexFlag;
        $(guoqiclassName).addClass('on');
        // console.log(2);
        guoqitempIndex = guoqiindexFlag;
        guoqiindexFlag++;
    }
    let guoqiIterval = setInterval(guoqiMove, 2000);
    $('#test1 li').mouseenter(function (event) {
        // event.stopPropagation();    //  阻止事件冒泡
        clearInterval(guoqiIterval);
        // console.log(111);

    });
    $('#test1 li').mouseleave(function (event) {
        // event.stopPropagation();    //  阻止事件冒泡
        clearInterval(guoqiIterval);
        guoqiIterval = setInterval(guoqiMove, 2000);
        // console.log(222);
    });

    //单击控制样式自动
    let guoqiSelIndex;
    $('#test1 li').click(function () {
        guoqiSelIndex = $('#test1 li').index(this);
        $(this).addClass('on');
        // console.log(guoqiSelIndex);
        // console.log(guoqitempIndex);
        if (guoqiSelIndex != guoqitempIndex) {
            $('#test1 li').eq(guoqitempIndex).removeClass('on');
        }
        guoqitempIndex = guoqiSelIndex;
    });




    //人均废弃量top5
    setTimeout(() => { feiqiliang(echarts, 'feiqiliang-bar'); }, 100)


    //检查明细

    //消毒台账统计
    var xiaoduData = [{
        value: 900,
        name: '已完成'
    },
    {
        value: 780,
        name: '未完成'
    },
    ]
    var xiaoduColor1 = ['#56b9ff', '#f3cf4d']
    xiaoduchart(echarts, 'xiaodu-pie', xiaoduData, xiaoduColor1);
    var sanweibardata = ["餐具消毒数（个）", "公共用具消毒（个）"]
    sanweibar2(echarts, 'xiaodu-bar');


    //刘杨台账
    var liuyangData = [{
        value: 900,
        name: '已完成'
    },
    {
        value: 780,
        name: '未完成'
    },
    ]
    xiaoduchart(echarts, 'liuyang-pie', liuyangData, xiaoduColor1);



    sanweibar3(echarts, 'liuyang-bar');



    //过期预警
    $(document).ready(function () {
        $('.m-slick2').slick({
            dots: false,
            arrows: false,
            infinite: true,
            autoplay: true,
            vertical: true,
            autoplaySpeed: 5000,
            fade: false,
            pauseOnFocus: false,
            pauseOnHover: false,
            pauseOnDotsHover: false,
            speed: 500,
            slidesToShow: 4,
            slidesToScroll: 4
        });
        $('.m-slick1').slick({
            dots: false,
            arrows: false,
            infinite: true,
            autoplay: true,
            vertical: true,
            autoplaySpeed: 5000,
            fade: false,
            pauseOnFocus: false,
            pauseOnHover: false,
            pauseOnDotsHover: false,
            speed: 500,
            slidesToShow: 4,
            slidesToScroll: 4
        });
    });
</script>


</html>